<template>
    <div class="user">
        <t-header></t-header>
        <div class="form-wrap">
            <div class="form-list">
                <div class="form-title">登录</div>
                <div class="form-item">
                    <div class="item-title">请输入邮箱*</div>
                    <el-input v-model="LoginForm.email" placeholder="请输入邮箱"></el-input>
                </div>
                <div class="form-item">
                    <div class="item-title">请输入密码*</div>
                    <el-input type="password" v-model="LoginForm.password" placeholder="请输入密码"></el-input>
                </div>
                <div class="form-item">
                    <div class="item-title">请输入验证码*</div>
                    <el-input v-model="LoginForm.checkCode" placeholder="请输入验证码"></el-input>
                    <div @click="newCheckCode" ref="checkCodeRef" class="checkCode">abcd</div>
                    <div @click="checkFormParams" class="submitForm">登录</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Header from '../components/global/Header';
import { ref, reactive, onMounted } from '@vue/composition-api';
import axios from 'axios';
export default {
    components: {
        't-header': Header
    },
    setup(props, context) {
        // axios配置
        axios.defaults.baseURL = 'http://47.105.157.158:3000';

        onMounted(() => {
            // 获取验证码
            getCheckCode();
        })

        // 验证码
        let checkCode = "";
        // 验证码DOM
        const checkCodeRef = ref(null);

        // 获取验证码
        const getCheckCode = async function() {
            let { data: res } = await axios.get('/get/checkcode');
            if (res.status != 200)
                return context.parent.$message.error('获取验证码失败');
            checkCode = res.checkCode;
            context.parent.$nextTick(() => {
                checkCodeRef.value.innerHTML = checkCode;
            })
        }

        // 点击验证码时，获取新的验证码
        const newCheckCode = function () {
            getCheckCode();
        } 


        // 登录表单
        const LoginForm = reactive({
            password: '',
            email: '',
            checkCode: ''
        });

        // 密码验证规则
        let checkPassword = /^[a-zA-Z0-9]{5,18}$/i;
        // 邮箱验证规则
        let checkEmail = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;

        // 验证登录表单
        const checkFormParams = function () {
            // 邮箱
            if (!checkEmail.test(LoginForm.email))
                return context.parent.$message.error('邮箱格式错误，请重新输入');
            // 密码
            if (!checkPassword.test(LoginForm.password))
                return context.parent.$message.error('密码只能是数字、字母，长度5~18');
            // 验证码
            if (LoginForm.checkCode !== checkCode)
                return context.parent.$message.error('验证码不匹配，请重新输入');
            // 提交登录表单
            submitForm();
        }

        // 提交登录表单
        const submitForm = async function () {
            let { data: res } = await axios.post('/user/login', LoginForm);
            if (res.status != 200)
                return context.parent.$message.error(res.msg);

            context.parent.$message.success(res.msg);
            setTimeout(() => {
                // 存储token到本地
                window.localStorage.setItem('token', res.token);
                // 改变登录状态
                context.parent.$store.commit('setIsLogin', true);
                // 存储token到共享数据
                context.parent.$store.commit('setToken', res.token);
                // 存储用户信息
                context.parent.$store.commit('setUser', res.user);
                context.parent.$router.push('/home');
            }, 2000)
        }
        

        const methods = { checkFormParams, newCheckCode }

        return {
            ...methods,
            LoginForm,
            checkCodeRef
        }
    }
}
</script>

<style lang="less" scoped>
.user {
    overflow: hidden;
    height: 100%;
    background: url('../assets/images/user.jpg');
    background-size: cover;
    text-align: right;
}

.form-wrap {
    display: inline-block;
    width: 800px;
    height: 100%;
    background-color: #fff;
    text-align: left;
    
}

.form-list {
    width: 600px;
    margin-left: 100px;
    padding: 20px 0;
    .form-title {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 60px;
    }
    .form-item {
        margin-bottom: 20px;
       .item-title {
           color: #4b4b4b;
           font-size: 14px;
           font-weight: 700;
           margin-bottom: 10px;
       }
       .checkCode {
           width: 100px;
           height: 50px;
           text-align: center;
           line-height: 50px;
           color: #fff;
           letter-spacing: 4px;
           border-radius: 6px;
           cursor: pointer;
           margin: 10px 0 20px 0;
           background-color: #999;
       }
       .submitForm {
           height: 40px;
           width: 100%;
           background-color: #73bcf3;
           color: #fff;
           font-weight: 700;
           text-align: center;
           line-height: 40px;
           border-radius: 8px;
           cursor: pointer;
       }

    }
}
</style>